import { Fragment, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import './index.css'
import LOGO_URL from '@/assets/images/logo.gif'

// el-menu节点
const FMenu = (props) => {
  const route = useRoute()
  const router = useRouter()
  const currentRoute = route.fullPath
  const { collapse, menuConfig, menuList } = props
  const searchValue = ref('')

  const restaurants = window.$menus.filter((item) => item.href)
  const querySearch = (queryString, cb) => {
    const results = (queryString ? restaurants.filter(createFilter(queryString)) : restaurants).map((item) => {
      return {
        value: item.name,
        link: item.href
      }
    })
    cb(results)
  }
  const createFilter = (queryString) => {
    return (restaurant) => {
      return restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    }
  }
  const handleSelect = (item) => {
    router.push(item.link)
  }
  return (
    <el-menu
      style={{ height: '100vh' }}
      router={true}
      defaultActive={currentRoute}
      textColor={menuConfig.textColor}
      backgroundColor={menuConfig.backgroundColor}
      activeTextColor={menuConfig.activeTextColor}
      class="f-menu-vertical"
      collapse={collapse}
    >
      <el-menu-item disabled={false} index={''}>
        <img class={!collapse ? 'f-menu-logo-default' : 'f-menu-logo-mini'} src={LOGO_URL} alt="" />
        {!collapse ? <span class="margin-left-12 ellipsis">{window.$env.VITE_APP_PROJECT_NAME}</span> : false}
      </el-menu-item>
      {!collapse ? (
        <el-menu-item disabled={false} index={''}>
          <el-autocomplete
            style={{ width: '100%' }}
            size="default"
            v-model_trim={searchValue.value}
            fetch-suggestions={querySearch}
            trigger-on-focus={false}
            clearable
            placeholder="请输入你要搜索的菜单"
            onSelect={handleSelect}
          />
        </el-menu-item>
      ) : null}
      {menuList.map((menu) => {
        if (menu.children) {
          return <FSubMenu menu={menu} />
        } else {
          return <FMenuItem menu={menu} />
        }
      })}
    </el-menu>
  )
}

// el-sub-menu节点
const FSubMenu = (props) => {
  const { id, name, children, icon } = props.menu
  // 定义具名插槽：title
  const slots = {
    title: () => {
      return (
        <Fragment class="flex-start-center">
          <f-icon icon={icon} size={18} type="element" />
          <span>{name}</span>
        </Fragment>
      )
    }
  }
  return (
    <el-sub-menu index={id} v-slots={slots}>
      {children.map((x) => {
        if (x.children) {
          // 递归
          return <FSubMenu menu={x} />
        } else {
          //实际节点，则渲染
          return <FMenuItem menu={x} />
        }
      })}
    </el-sub-menu>
  )
}
// el-menu-item节点
const FMenuItem = (props) => {
  const { icon, href, name } = props.menu
  if (icon) {
    return (
      <el-menu-item index={href} disabled={false} class="flex-start-center">
        <f-icon icon={icon} size={18} type="element" />
        <span>{name}</span>
      </el-menu-item>
    )
  } else {
    return (
      <el-menu-item index={href} disabled={false} class="flex-start-center">
        <span style={{ 'text-indent': '16px' }}>{name}</span>
      </el-menu-item>
    )
  }
}

export default FMenu
